<template>
  <div class="data-list">
    <publicToilet v-if="routeType == 1" />
    <garbageStation v-if="routeType == 2" />
    <recyclingStation v-if="routeType == 3" />
    <sanitationRoom v-if="routeType == 4" />
    <parkingLots v-if="routeType == 5" />
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
// 导入子组件
import publicToilet from "./PublicToilet/index.vue";
import garbageStation from "./GarbageStation/index.vue";
import recyclingStation from "./RecyclingStation/index.vue";
import sanitationRoom from "./SanitationRoom/index.vue";
import parkingLots from "./parkingLots/index.vue";

// 页面说明：只导入各个页面的列表，详情和导出弹框还是采用 DataList 文件夹对应的组件，

import { useRoute } from "vue-router";

defineOptions({
  name: "HistorySite",
});

const route = useRoute();
// 路由参数 1 公共厕所 2 垃圾压缩站 3 可回收物点站场 4 环卫道班房
const routeType = ref(route.query.type);

watch(
  () => route.query,
  (newVal) => {
    routeType.value = newVal.type;
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>
<style scoped lang="scss">
.data-list {
  width: 100%;
  height: 100%;
  transform: scale(1);
}
</style>
